<template>
  <div class="approDetail">
      <div class="approveItem">
          <h1 class="titleDesc"><span v-if="isLeaveICon">{{res.name}}的请假申请</span><span v-else>{{res.name}}的销假申请</span></h1>
          <p><i class="icon-approve"></i><span :class='hasClass(res.audit_status_name)'>{{res.audit_status_name}}</span></p>
          <div @click="showDetail" v-if="relateId" class="showButton"><span v-if="isLeaveICon">查看该流程销假详情</span><span v-else>查看该流程请假详情</span></div>
          <div class="borderColor"></div>    
      </div>
      <div class="desc">
            <ul>
                <li><span class="title">审批编号</span><span class="desc_detail">{{res.busi_id || res.applyId}}</span></li>
                <li><span class="title" v-if="isLeaveICon">请假类型</span><span class="title" v-else>销假类型</span><span class="desc_detail">{{res.leave_name}}</span></li>
                <li><span class="title">所在部门</span><span class="desc_detail">{{res.dept_name}}</span></li>
                <li><span class="title">开始时间</span><span class="desc_detail">{{res.start_time}} {{res.Leave_st_section === '1' ? '上午' : '下午'}}</span></li>
                <li><span class="title" v-if="isLeaveICon">结束时间</span><span class="title" v-else>实际结束时间</span><span class="desc_detail">{{res.end_time}} {{res.Leave_end_section === '1' ? '上午' : '下午'}}</span></li>
                <!-- <li><span class="title" v-if="isLeaveICon">请假天数</span><span class="title" v-else>销假天数</span><span class="desc_detail">{{res.leave_day}}天</span></li> -->
                <li><span class="title" >请假天数</span><span class="desc_detail">{{res.leave_day}}天</span></li>
                <li><span class="title" v-if="isLeaveICon">请假事由</span><span class="title" v-else>销假事由</span><span class="desc_detail">{{res.leave_reason}}</span></li>
                <li><span class="title">知会人  </span><span class="desc_detail">{{zhihuirens}}</span></li>
               
            </ul>
            <!-- <div class="startItem">
                <div class="leftCon">
                    图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片
                </div>
                <div class="fluid">
                    <img src="/static/imgs/man image.png" alt="">
                </div>
            </div> -->


            <div class="startItem">
                <div class="leftCon">
                    附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件
                </div>
                <div class="fluid">
                    <img :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token' @click="previewPhoto(index)" v-for='(k,index) in imgList'  alt="">
                    <div
                        
                        download="img"
                        style='display:block'
                        class='color-third' 
                        @click="previewFile(k)"
                        v-for='(k,i) in fileList'>
                        <i :class="textExtension(k)"></i>
                        <span>{{k.fileName}}</span>
                        </div>
                </div>
            </div>
      </div>
      <div class="bgColor"></div>
      <div class="progress">
            <div class="leftCon">
                <div></div>
            </div>
            <div class="fluid">
                  <ul>
                      <li v-for='(k,i) in LogList'><i :class='setColor(k)' class="icon-process"></i><span class="name">{{k.loger_oper}}</span><span class="dept">({{k.dept_descr}})</span><span :class='hasClass(k.oper_result_name)' class="start">{{k.oper_result_name}}</span><span class="time">{{k.loger_date | handleEndTime}}</span>
                           <div class="apprDesc" v-if='k.loger_info'>{{k.loger_info}}</div>
                      </li>
                    
                  </ul>
            </div>          
      </div>
      <div class="bgColorBottom">

      </div>
      <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>
      <v-panel v-if="showPanel" :secondShow.sync="secondShow" :relateId="relateId" :isShow.sync="showPanel" :isFirstShow.sync="isFirstShow" @loadEnd="loadEnd"></v-panel>

  </div>

</template>

<script>

import Vue from "vue";
import { Spinner} from "mint-ui";
Vue.component(Spinner.name, Spinner);
import preview from '@/common/js/preview' 
import Panel from '@/components/public/panel'
export default {
  name: "app",
  data() {
    return {
      approve: "部门领导审批",
      res: {},
      query: null,
      fileList: [],
      LogList: [],
      zhihuirens:null,

      imgList:[],
      imgUrlList:[],

      relateId:null,
      showPanel:false,
      isFirstShow:true,
      secondShow:false,
      spinnerShow:false,

      jsapi_ticket:null,
    };
  },
  components:{
      'v-panel':Panel
  },
  methods: {

      loadEnd:function(){
          this.spinnerShow = false;
      },

      showDetail:function(){

          if (this.isFirstShow) {
              this.spinnerShow = true;
              this.showPanel = true;
              this.secondShow = true;
          } else {
              this.spinnerShow = false;
              this.secondShow = true;
          }
          
      },

      setColor:function(k){
           if (k.oper_result_name=="审批中" || k.oper_result_name.indexOf('待审批') > -1 || k.oper_result_name.indexOf('备案中') > -1  || k.oper_result_name=="待备案") {
               return "";
           } else {
               return 'color';
           }
        
      },

    
    hasClass: function(status) {

      if (!status) {
          return;
      }
      if (status.indexOf("拒绝") > -1) {
        return { reject: true };
      } else if (status.indexOf("审批中") > -1 || status.indexOf('备案中') > -1 || status.indexOf('待备案') > -1 ||  status.indexOf('待审批') > -1) {
        return { waitAppro: true };
      } else if (status.indexOf('已备案') > -1 || status.indexOf('已同意') > -1 || status.indexOf('审批同意') > -1) {
        return { Appro: true };
      } else {
        return { color: true };
      }
    },

    getDetail: function() {
    //   var arr = [];
    //   location.search.split("&").forEach(function(val, index) {
    //     arr.push(val.split("=")[1]);
    //   });

      var storageParams = JSON.parse(localStorage.getItem('updateId'));

      let params = {
        applyId: storageParams.AI,
        exectionId: storageParams.AI,
      };

      this.Axios
        .Post(this.URL.examineBydetails.url, params)
        .then((res) => {
          this.res = res.data.datas || {};
          this.relateId = this.res.relate_id || '';
          // var zhihuiList = res.data.datas[2];
          //   if (zhihuiList) {
          //       Object.keys(zhihuiList).forEach((val,index)=>{
          //           this.zhihuirens ? this.zhihuirens = this.zhihuirens + '、' +zhihuiList[val] : this.zhihuirens = zhihuiList[val];
          //       })
          //   }
          this.zhihuirens =  this.res.ZHR || '';


        })

    },

    textExtension:function(item){
        if ((/(\.jpg|\.png|\.gif|\.ps|\.jpeg)$/g).test(item.fileName)){
            return 'icon-img';
        } else if ((/(\.word|\.doc)$/g).test(item.fileName)) {
            return 'icon-word'
        } else if ((/(\.pdf)$/g).test(item.fileName)) {
            return 'icon-pdf'
        } else if ((/(\.ppt|\.pptx)$/g).test(item.fileName)) {
            return 'icon-ppt'
        } else if ((/(\.xls|\.xlsx)$/g).test(item.fileName)) {
            return 'icon-excel'
        } else {
            return 'icon-docu'
        }
    },

      previewPhoto:function(index){




            // var obj = {
            //     urls : this.imgUrlList,
            //     current : this.imgUrlList[index]
            // };
            // preview.start(obj);  



            console.log(this.imgUrlList,this.imgUrlList[index],index,'previewImg')
            try {
                wx.previewImage({
                    current: this.imgUrlList[index], // 当前显示的图片链接
                    urls: this.imgUrlList // 需要预览的图片链接列表
                });
            }catch(err){
                console.log(err);
            }


            // wx.previewImage({
            //     current: this.imgUrlList[index], // 当前显示的图片链接
            //     urls: this.imgUrlList // 需要预览的图片链接列表
            // });

      },

        previewFile : function(k){

            // console.log('url',this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.id + "&token="+ this.token)
            // console.log('name',k.fileName)
            // console.log('wx',wx)
            wx.previewFile({
                url: this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.id + "&token="+ this.token, // 需要预览文件的地址(必填，可以使用相对路径)
                name: k.fileName,
                size: '7134969'
            });   
            // wx.previewFile({
            //     url: 'https://m2.cmhk.com/WXP/attachProxy?id=15d1473008107e82f26434f4d1489f3c&user=xgt&password=ff7314db6b3cd57dc966259f7be35e68', // 需要预览文件的地址(必填，可以使用相对路径)
            //     name: '商业银行业务连续性监管指引.pdf',
            //     size: '7134969'
            // });   
                   
        },

       wxConfig : function () {
            //alert('ddd='+jsapi_ticket);
            //获取当前url，不含#以及之后的部分
            //var timestamp = new Date().getTime(); //生成签名的时间戳(当前时间)
		    var timestamp = Date.parse(new Date())/1000;
		    var noncestr = this.randomString(16);
            var url = window.location.href;
            // var url = 'http://m2.cmhk.com:8080/module/approveDetail.html';
            var index = url.indexOf('#');
            if(index !== -1 ) {
                url = url.slice(0,index);
            }
            // this.jsapi_ticket="HoagFKDcsGMVCIY2vOjf9gXRpbaCGInwR_o3ym04PkbYRz1T-fxUauc36IU38BE7ypXPvQn1Jj593lCYf-SdIw";
            var temp = "jsapi_ticket="+this.jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
            console.log("jsapi_ticket="+this.jsapi_ticket);
            console.log("timestamp="+timestamp);
            console.log("noncestr="+noncestr);
            console.log("temp="+temp);
            var signature = sha1(temp);
            console.log("signature="+signature);
            console.log("wx配置注册================");
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'ww8976d3a691029d70', // 必填，企业微信的corpID
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名，见[附录1](#11974)
                jsApiList: [
                    'checkJsApi',
                    'previewImage',
                    'previewFile'

                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        
            wx.ready(() => {
                console.log('ready');
                //分享到朋友圈
                //wx.previewImage({
                //    current: '', // 当前显示的图片链接
                //    urls: [] // 需要预览的图片链接列表
                //});
                this.checkJsApi();


            });
            wx.error(function(res){
            	console.log("微信JS SDK配置错误！",res);
            });
        },
        checkJsApi:function(){
            console.log("checkJsApi");
            wx.checkJsApi({
                jsApiList: ["previewImage", "previewFile"],
                success: function(a) {
                    console.log(a,'checkJS')
                    alert(JSON.stringify(a,'checkJS'))
                },
                fail:function(err){
                    console.log(err,'errJSCheck')
                }
            });
        },
        randomString : function(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (var i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },
    lookAlready() {
        var storageParams = JSON.parse(localStorage.getItem('updateId'));
        if (!storageParams.cId) {
            return;
        }
        let params = {
            cId: storageParams.cId + ''
        };
        this.Axios.Post(this.URL.updateStatus.url, params).then(res => {
            if (res.data.status == 1) {
            }
        });
    }
  },
  computed:{
    isLeaveICon:function(){
        if (this.busi_id && this.busi_id.indexOf('XJ')>-1) {
            return false;
        }
        return true;
    }
  },
  filters: {
    handleEndTime: function(val) {
      if (val) {
        return val.replace(/\-/g, ".").slice(5);
      }
    }
  },
  watch: {},
  created() {

    // var arr = [];
    // location.search.split("&").forEach(function(val, index) {
    //   arr.push(val.split("=")[1]);
    // });

    // this.query = arr;

    var storageParams = JSON.parse(localStorage.getItem('updateId'));

    this.token = localStorage.getItem("token");
    this.busi_id = storageParams.AI;
    if (storageParams) {

      var params = {};
      params.busi_id = storageParams.AI;
      this.Axios.Post(this.URL.getFileListByBusiId.url, params).then(res => {
          var resultList = res.data.datas;
          
          resultList.forEach((val,index,arr) => {
              if (this.textExtension(val) === 'icon-img'){
                  this.imgList.push(val)
                  this.imgUrlList.push(this.Axios.baseURI+"/"+this.URL.downloadFile.url+"?id="+val.id+"&token="+this.token)
              } else {
                  this.fileList.push(val)
              }
          })
      });

      this.Axios.Post(this.URL.getApprovedLogList.url, params).then(res => {
        this.LogList = res.data.datas;
      });
    }

    this.lookAlready();
  },
  mounted: function() {
    this.getDetail();
    this.Axios
      .Post(this.URL.getTicket.url, {})
      .then((res) => {
          this.jsapi_ticket = res.data.datas.result.ticket;
          console.log(this.jsapi_ticket,'this.jsapi_ticket');
          this.wxConfig();               
      })
  }
};
</script>

<style >
html body {
  background-color: #f3f3f3;
}
</style>
<style lang="less" scope="scope">
.color {
  color: #0079e3;
}
.isAppro {
  color: #d8d41d;
}
.reject {
  color: #e24040;
}
.waitAppro {
  color: #d8d41d;
}
.Appro {
  color:#48A18C;
}

.approDetail {
  font-family: "Microsoft YaHei", "微软雅黑";
  .approveItem {
    padding-top: 0.26rem;
    background-color: #fff;
    .titleDesc {
      padding-left: 0.3rem;
      font-size: 0.4rem;
      position: relative;
      line-height: 0.48rem;
    }
    p {
      display: flex;
      font-size: 0.32rem;
      color: #999;
      padding-left: 0.3rem;
      margin: 0.1rem auto;
      align-items: center;
      .leaderAppr {
        color: #d8d41d;
      }
      i {
        margin-right: 0.1rem;
      }
    }
    .borderColor {
      border-bottom: 1px solid #f3f3f3;
    }
  }

  .desc {
    font-size: 0.32rem;
    padding-bottom: 0.8rem;
    background-color: #fff;
    padding-top: 0.2rem;
    li {
      line-height: 0.6rem;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      .title {
        color: #999;
        width: 2rem;
        margin:0 0.2rem 0 0.3rem;
      }
      .desc_detail {
        word-wrap: break-word;
        word-spacing: normal;
        max-width: 5.2rem;
      }
    }
    .startItem {
      display: flex;
      margin-top: 0.12rem;
      .leftCon {
        color: #999;
        margin: 0 0.86rem 0 0.3rem;
      }
      .fluid {
        flex: 1;
        padding-right: 0.3rem;
        img{
          display: inline-block;
          max-height:1rem;
          margin-right:0.1rem;
        }
      }
    }
  }
  .bgColor {
    height: 0.1rem;
    background-color: #f3f3f3;
  }
  .progress {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    .leftCon {
      margin: 0 0.3rem;
      border-left: 0.02rem dotted #999;
    }
    .fluid {
      flex: 1;
      padding-right: 0.3rem;
      i.icon-process {
        color: #aaa;
        position: absolute;
        left: -0.46rem;
        top: 0.26rem;
        z-index: 100;
      }
      ul {
        margin-top: 0.24rem;
        margin-bottom: 0.3rem;
        li {
          position: relative;
          font-size: 0.28rem;
          line-height: 0.8rem;
          > span:not(.name) {
            display: inline-block;
            line-height: 0.28rem;
          }
          .color {
            color: #0079e3;
          }
          .success {
            color: #339966;
          }
          .isAppro {
            color: #d8d41d;
          }
          .name {
            font-size: 0.32rem;
            margin-right: 0.1rem;
            font-weight: 600;
          }
          .dept {
            margin-right: 0.2rem;
          }
          .start {
            margin-right: 0.3rem;
          }
          // .time{
          //   float:right;
          //   margin-top: 0.32rem;
          // }
          div.apprDesc {
            font-size: 0.32rem;
          }
          div.detail {
            // display: inline-block;
            // width:80%;
            float: right;
            line-height: 0.28rem;
            vertical-align: middle;
            text-align: right;
          }
        }
      }
    }
  }
  .fixedToBottom {
    position: fixed;
    width: 100%;

    bottom: 0;
    left: 0;
    .approBtn {
      display: flex;
      height: 0.8rem;
      align-items: center;
      font-size: 0.32rem;
      font-weight: 600;
      border-top: 1px solid #f3f3f3;
      background-color: #fff;
      div.approBtnCol {
        flex: 1;
        text-align: center;
        height: 0.8rem;
        color: #007de4;
        line-height: 0.8rem;
      }
      div:not(last-child) {
        border-right: 1px solid #f3f3f3;
      }
    }
  }
}

  .bgColorBottom{
      height: 0.1rem;
      width:100%;
  }
  .showButton{
    height: 0.6rem;
    line-height:0.6rem;
    border: none;
    width:100%;
    text-align:left;
    padding-left:0.3rem;
    outline: none;
    font-size: 0.32rem;
    font-weight: normal;
    color: #fff;
    color: #007de4;
  }
.spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
}

</style>

